<template>
	<gracePage statusBarBG="#1BA375" background="#1BA375">
		<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
		<view slot="gHeader" style="background-color: #1BA375;">
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="appFn.navigateBackFn"></view>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex text-center"><text class="grace-white grace-h4">制作推广图</text></view>
				<!-- 设置按钮 -->
				<view class="grace-header-icons font-size-24 grace-white" @click="getBgimg">更换</view>
			</view>
		</view>
		<view slot="gBody">
			<view class=" grace-flex-center grace-flex-vcenter" :style="{ height: boxHeight + 'rpx' }" v-show="replaceImg">
				<view @click="getBgimg"><image src="/static/images/noImg.png" style="width: 300rpx;height: 300rpx;"></image></view>
			</view>
			<view v-show="!replaceImg">
				<view class="grace-flex-center pt-2">
					<scroll-view scroll-y :style="{ width: imgwidth + 'rpx', height: imgheight + 'rpx' }">
						<html2canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish">
							<view id="poster">
								<movable-area scale-area :style="{ width: imgwidth + 'rpx', height: imgheight + 'rpx' }">
									<view v-for="(item, index) in imgLists" :key="index">
										<image :src="item.url" :style="{ width: imgwidth + 'rpx', height: imgheight + 'rpx' }" @load="imageLoad" :data-imgurl="item.url"></image>
									</view>
									<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">
										<image :src="testImg" mode="widthFix"></image>
									</movable-view>
								</movable-area>
							</view>
						</html2canvas>
					</scroll-view>
				</view>
			</view>
			<!-- <image :src="resultBase64" v-show="!editImgStatus" mode="widthFix"></image> -->
			<view class=" grace-flex-center mt-2">
				<button type="primary" class="grace-button width-250 grace-gtbg-green grace-tbr-large" v-show="replaceImg" @click="getBgimg()">选择图片</button>
				<button type="primary" class="grace-button width-250 grace-gtbg-green grace-tbr-large" v-show="!replaceImg" @click="liulan()">{{editImgText}}</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import { base64ToPath, pathToBase64 } from '@/common/lib/image-tools.js';

export default {
	data() {
		return {
			boxHeight: 800,
			scale: 2,
			imgLists: [],
			old: {
				x: 0,
				y: 0,
				scale: 2
			},
			replaceImg: true,
			domId: '',
			logoBase64: '',
			resultBase64: '',
			editImgText: '保存本地',
			imgwidth: 0,
			imgheight: 0,
			testImg: ''
		};
	},
	onLoad: function() {
		this.__init();
	},
	methods: {
		async __init() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_qrcode' }, { token: true });
			this.testImg = data;
		},
		onScale: function(e) {
			this.old.scale = e.detail.scale;
		},
		getBgimg() {
			let _this = this;
			uni.chooseImage({
				// count:  允许上传的照片数量
				count: 1,
				// sizeType:  original 原图，compressed 压缩图，默认二者都有
				sizeType: ['compressed'],
				success(res) {
					_this.replaceImg = false;
					_this.imgLists = [];
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						_this.imgLists.push({ url: res.tempFilePaths[i], progress: 0, error: false });
					}
				}
			});
		},
		/**
		 * 渲染完毕接收图片
		 * @param {String} base64
		 */
		renderFinish(base64) {
			this.resultBase64 = base64;
			// this.editImgStatus = !this.editImgStatus;
			this.downloadImg(base64);
		},
		liulan() {
			this.domId = '#poster';
			
		},
		imageLoad: function(e) {
			var _this = this;
			var $width = e.detail.width, //获取图片真实宽度
				$height = e.detail.height,
				ratio = $width / $height; //图片的真实宽高比例
			var viewWidth = 500, //设置图片显示宽度，
				viewHeight = 500 / ratio; //计算的高度值
			this.imgwidth = viewWidth;
			this.imgheight = viewHeight;
		},
		//保存图片到本地
		downloadImg(url) {
			let _this = this;
			_this.editImgText = '保存中'
			uni.saveImageToPhotosAlbum({
				filePath: url,
				success: () => {
					uni.hideLoading();
					_this.editImgText = '图片已保存'
					// _this.$util._toast('图片已保存');
				},
				fail: () => {
					uni.hideLoading();
					console.log('保存失败')
					// _this.$util._toast('保存失败');
				},
				complete: () => {}
			});
		},
	},
	components: {
		gracePage
	}
};
</script>
<style>
/* page{background-color:#7ACBDC;} */
movable-view {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150rpx;
	width: 150rpx;
	background-color: #007aff;
	color: #fff;
}

movable-area {
	/* height: 300rpx; */
	width: 100%;
	background-color: #d8d8d8;
	overflow: hidden;
}
.width-250 {
	width: 250rpx;
}
.max {
	width: 500rpx;
	height: 500rpx;
}
</style>
